import Charts // !
import SwiftUI

struct ChartLabel : View {
    @State var classroom: Array<Student> = [
        Student(height: 165.0, name: "Foo"),
        Student(height: 150.0, name: "Boo"),
        Student(height: 140.0, name: "John"),
        Student(height: 155.0, name: "Doe")
    ]
    
    var body: some View {
        VStack(spacing: 20) {
            Text("Chart annotation")
                .font(.largeTitle)
            
            VStack {
                Text("Rectangle mark")
                Chart(classroom) {
                    
                    RectangleMark(
                        x: .value("Height", "\($0.height)"),
                        y: .value("Value", $0.height)
                    )
                    
                    RuleMark(
                        y: .value("Min height", 120.0)
                    )
                    .foregroundStyle(.orange)
                    .lineStyle(
                        StrokeStyle(lineWidth: 2, dash: [10])
                    )
                    .annotation(alignment: .trailing) {
                        Text("Min height: 120.0")
                            .font(.system(size: 18))
                            .foregroundColor(.orange)
                    }
                    
                    RuleMark(
                        y: .value("Max height", 170.0)
                    )
                    .foregroundStyle(.orange)
                    .lineStyle(
                        StrokeStyle(lineWidth: 2, dash: [10])
                    )
                    .annotation(alignment: .trailing) {
                        Text("Max height: 170.0")
                            .font(.system(size: 18))
                            .foregroundColor(.orange)
                    }
                }
                .chartXAxisLabel {
                    Text("Student height")
                        .font(.title3)
                        .foregroundColor(.blue)
                        .padding()
                }
                .chartXAxisLabel(position: .top, alignment: .center, spacing: 8) {
                    Text("Student height requirement")
                        .font(.title3.weight(.medium))
                        .frame(width: 300)
                        .padding()
                        .background(
                            Color.purple
                        )
                }
            }
            
        }
        .padding()
    }
}
